<template>
    <f7-page ptr @ptr:refresh="refresh" infinite :infinite-distance="50" :infinite-preloader="true" @infinite="infinite"
        class="common-page">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>移动机械</f7-nav-title>
            <f7-nav-right> </f7-nav-right>
        </f7-navbar>
        <div class="content">
            <div class="top-search">
                <van-search v-model="search.engineeName" @search="searchQuery" shape="round" background="#F7F8FA"
                    placeholder="工程名称" right-icon="search" left-icon="" />
            </div>
            <f7-list media-list class="search-list" v-if="query.data.length > 0">
                <li v-for="(item, index) in query.data" :key="index" @click="onDetail(item)" class="content-box">
                    <img src="../../../../../assets/img/qzjx/mobile/icon_engineer.png" alt="" class="left-box" />
                    <div class="right-box">
                        <div class="right-box-content">
                            <span class="engi-name">
                                {{ item.engineeName || "--" }}</span>
                            <span class="engi-num">
                                {{ item.num }}
                                <van-icon name="arrow" color="#CED6E0" />
                            </span>
                        </div>
                    </div>
                </li>
            </f7-list>
            <v-empty v-else description="暂无数据" style="padding-top: 67px !important" />
        </div>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller";
export default class instance extends controller {
    onBeforeInit() {
        this.urls = {
            query: "/equipment/eqmMobileRegister/queryEngineeList",
        };
    }
    mixin() {
        return {
            data() {
                return {
                    search: {},
                };
            },
            methods: {
                async onDetail(item) {
                    let res = await this.getPermission(item.engineeId);
                    if (res) {
                        this.$f7router.navigate(`/business/qzjx/mobileEquipment/statistic/equipList?engineeId=${item.engineeId}&useStatusList=enter`);
                    }
                },
                // 获取权限
                getPermission(engineeId) {
                    return new Promise((resolve, reject) => {
                        this.$f7.request.post(
                            `/app/equipment/eqmMobileRegister/getPermission`,
                            {
                                engineeId: engineeId,
                            },
                            (r) => {
                                r = JSON.parse(r);
                                if (r && r.success) {
                                    resolve(true);
                                    window.localStorage.setItem("mobileEquip-isConOrg", r.parameters.isConOrg ? 1 : 0);//施工
                                    window.localStorage.setItem("mobileEquip-isSupOrg", r.parameters.isSupOrg ? 1 : 0);//监理
                                    window.localStorage.setItem("mobileEquip-isSupervisor", r.parameters.isSupervisor ? 1 : 0);//监督员
                                } else {
                                    resolve(false);
                                }
                            },
                            (err) => {
                                reject();
                            }
                        );
                    });
                },
            }
        };
    }
}
</script>

<style lang="less" scoped>
@import url("../../../../../assets/css/commonPage.less");

.top-search {
    position: fixed;
    z-index: 99;
    width: 100%;
    display: flex;
    align-items: center;
    height: 57px;
    background: #fff;
    padding: 0 16px;
    box-sizing: border-box;
    border-top: 1px solid #eeeeee;

    .van-search {
        height: 35px;
        flex: 1;
        border-radius: 17.5px;
    }
}

.common-page .search-list {
    padding-top: 67px;

    .content-box {
        background: linear-gradient(98deg, #ffffff 0%, #ffffff 50%, #eff6ff 100%);
        box-shadow: 0px 2px 4px 0px rgba(165, 201, 255, 0.1);
        border-radius: 8px;
        border: 2px solid #ffffff;

        .right-box {
            display: flex;
            align-items: center;
            overflow: hidden;

            .right-box-content {
                flex: 1;
                display: flex;
                align-items: center;

                overflow: hidden;

                .engi-name {
                    flex: 1;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .engi-num {
                    margin-left: 16px;
                    font-size: 18px;
                    color: #3385ff;
                }
            }
        }
    }
}
</style>
